<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css clear</title>

    <style type="text/css">

        div {
            font-size: 200%;
            /* 文本水平居中*/
            text-align: center;
        }

        .div1 {
            background-color: red;
            /* 文本垂直居中*/
            height: 100px;
            line-height: 100px;
            width: 200px;
        }

        .div2 {
            background-color: greenyellow;
            height: 200px;
            line-height: 200px;
            width: 80%;

            float: right;
        }

        .div3 {
            background-color: blue;
            height: 300px;
            line-height: 300px;
            width: 50%;

            float: top;
            /*clear: both;*/
        }

        .div4 {
            background-color: red;
            height: 200px;
            line-height: 200px;
            width: 400px;
            font-size: 200%;
        }

    </style>
</head>
<body>

    <div class="div1">div</div>
    <br>

    <div class="div2">div2</div>
    <br>

    <div class="div3">div3</div>
    <br>

    <div class="div4">div4</div>
    <br>
</body>
</html>